<template>
  <div>
    <h2 class="press">话务分析</h2>
    <el-table :data="tableData" height="500" border style="width: 100%">
      <el-table-column prop="time" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="callid" label="callid" width="180">
      </el-table-column>
      <el-table-column prop="srcip" label="srcip">
      </el-table-column>
      <el-table-column prop="dstip" label="dstip">
      </el-table-column>
      <el-table-column prop="siptype" label="siptype">
      </el-table-column>
    </el-table>

    <v-chart class="chart" :option="option" />
    <v-chart class="chart" :option="option1" />
    <v-chart class="chart" :option="option2(10)" />


    <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in datas" :value="item.callid">
      </el-option>
    </el-select>
    
    <el-row>
      <el-button type="primary" @click="exitdocument">退出</el-button>
    </el-row>
  </div>

</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      value: '',
      datas: [],
      tableData: [],
      caldatas: '',
      caldata: [
        {
          value: 0,
          name: '注册成功'
        },
        {
          value: 0,
          name: '订阅成功'
        },
        {
          value: 0,
          name: '通知失败'
        },
        {
          value: 0,
          name: '通知成功'
        },
        {
          value: 0,
          name: '拨打成功'
        }
      ],
      len: 0,
      len1: 0,

      //流程图

      echrsdata: [],
      echartslinks: [],

    }
  },
  methods: {
    getdatas() {
      axios.get('http://127.0.0.1:7001/view').then(res => {

        this.datas = res.data;
        this.caldatas = this.datas;
        console.log(this.datas);
        this.datas.forEach((item) => {



          item.children.forEach((item, index) => {
            this.tableData.push(item);
            item.time = Number(item.time) * 1000;
            // 获取年份
            this.year = new Date(item.time).getFullYear();
            //获取月份，获取的月份比实际小1，所以需要+1
            this.month = new Date(item.time).getMonth() + 1;
            //获取日
            this.day = new Date(item.time).getDate();
            //获取时
            this.hours = new Date(item.time).getHours();
            //获取分
            this.minutes = new Date(item.time).getMinutes();
            if (this.minutes < 10) {
              this.minutes = '0' + this.minutes
            }
            //获取秒
            this.seconds = new Date(item.time).getSeconds();
            if (this.seconds < 10) {
              this.seconds = '0' + this.seconds
            }
            //组合格式为年-月-日 时：分：秒（2022-6-6 12:12:12）
            item.time = this.year + "-" + this.month + "-" + this.day + " " + this.hours + ":" + this.minutes + ":" + this.seconds;
            console.log(item.id, item.time, item.callid, '----', item.srcip, '-', item.dstip, item.siptype, index);

          })

          console.log('----------')


          //统计各种信令数量
          this.len = item.children.length;
          if (item.children[0].siptype == 'REGISTER' && item.children[this.len - 1].siptype == '200') {
            this.caldata[0].value = this.caldata[0].value + 1;
            item.children.push({
              type: '注册成功'
            });
          }
          else if (item.children[0].siptype == 'SUBSCRIBE' && item.children[this.len - 1].siptype == '200') {
            this.caldata[1].value = this.caldata[1].value + 1;
            item.children.push({
              type: '订阅成功'
            });
          }
          else if (item.children[0].siptype == 'NOTIFY' && item.children[this.len - 1].siptype == '480') {
            this.caldata[2].value = this.caldata[2].value + 1;
            item.children.push({
              type: '通知失败'
            });
          }
          else if (item.children[0].siptype == 'NOTIFY' && item.children[this.len - 1].siptype == '200') {
            this.caldata[3].value = this.caldata[3].value + 1;
            item.children.push({
              type: '通知成功'
            });
          }
          else if (item.children[0].siptype == 'INVITE' && item.children[this.len - 1].siptype == '200') {
            this.caldata[4].value = this.caldata[4].value + 1;
            item.children.push({
              type: '拨打成功'
            });
          }


        });
      })
    },

    exitdocument() {
      this.$router.push('/');
    },

    //得到echart数据
    getechartdatas() {
      axios.get('http://127.0.0.1:7001/echartsdata').then((res) => {
        this.echrsdata = res.data[0];
        this.echartslinks = res.data[1];
        console.log(this.echrsdata)
      });
    },
    option2(a) {
      this.datas.forEach((item, index) => {
        if (this.value == item.callid) {
          a = index;
        }
      });

      return {
        title: {
          text: 'Basic Graph'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: this.echrsdata[a],
            // links: [],
            links: this.echartslinks[a],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      }
    }

  },
  created() {
    //从后台拿数据
    this.getdatas(),
      this.getechartdatas()


  },
  computed: {
    option() {
      return {
        title: {
          text: '圆环图的例子',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'pie',
            data: this.caldata,
            radius: ['40%', '70%']
          }
        ]
      }

    },
    option1() {
      return {
        xAxis: {
          data: this.caldata.map(item => item.name)
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: this.caldata.map(item => item.value)
          }
        ]
      }
    },



  }
}
</script>
<style scoped>
.chart {
  height: 800px;
}

.press {
  font-size: 20px;

  color: #fafafa;

  letter-spacing: 0;

  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135
}
</style>
